<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>..</title>
	<script src="../js/jquery-1.12.4.js"></script>
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -->
	<!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<script src="../js/jquery.min.js"></script>
	<!-- <script src="../js/gauge.js"></script> -->
	<script src="../js/highcharts.js"></script>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
	<style>
		/* #a{
			width: 100px;
			margin: 0px;
		} */
		.col-md-8 {
			width: 100%;
		}

		ul {
			margin-right: 98px;
		}

		td,
		tr {
			color: rgba(69, 69, 69, 0.767);
		}

		#Section3,
		#Section4 td {
			height: 60px;
			line-height: 60px;
			text-align: right;

		}

		#Section4 td {
			line-height: 90px;
		}

		#Section3 {
			height: 60px;
			line-height: 60px;
		}

		#Section3 a {
			color: rgb(0, 191, 255);
			padding-left: 50px;
		}

		#Section4 h3 {
			line-height: 60px;
			color: royalblue;
		}
	</style>

</head>

<body>
	<div class="htmleaf-container">
		<div class="demo">
			<div class="container">
				<div class="row">
					<div class="col-md-8" id="a">
						<div class="tab" role="tabpanel">
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#Section1" aria-controls="home"
										role="tab" data-toggle="tab"><i class="fa fa-user"></i>个人资料</a></li>
								<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab"
										data-toggle="tab"><i class="fa fa-dashboard"></i>行业分析</a></li>
								<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab"
										data-toggle="tab"><i class="fa fa-leaf"></i>账号设置</a></li>
								<li role="presentation"><a href="#Section4" aria-controls="messages" role="tab"
										data-toggle="tab"><i class="fa fa-glass"></i>隐私设置</a></li>
								<li role="presentation"><a href="#Section5" aria-controls="messages" role="tab"
										data-toggle="tab"><i class="fa fa-bookmark"></i>信息认证</a></li>
								<li role="presentation"><a href="#Section6" aria-controls="messages" role="tab"
										data-toggle="tab"><i class="fa fa-edit
									"></i>计划管理</a></li>
							</ul>
							<!-- Tab panes -->
							<div class="tab-content tabs">
								<div role="tabpanel" class="tab-pane fade in active" id="Section1">
									<div class="panel panel-default panel-primary">
										<div class="panel-heading"><b>基本信息</b> </div>
										<div class="panel-body">
											<table class="table table-striped table-bordered table-hover">
												<tr>
													<th>姓名</th>
													<td>XXX</td>
												</tr>
												<tr>
													<th>性别</th>
													<td>XX</td>
												</tr>
												<tr>
													<th>所在地区</th>
													<td>XX-XX</td>
												</tr>
												<tr>
													<th>地址管理</th>
													<td>+新增地址</td>
												</tr>
												<tr>
													<th>出生日期</th>
													<td>XXXX/XX/XX</td>
												</tr>
											</table>
										</div>
									</div>

									<div class="panel panel-default panel-success">
										<div class="panel-heading">
											<h3 class="panel-title"><b>教育信息</b></h3>
										</div>
										<div class="panel-body">
											<table class="table table-striped table-bordered table-hover">
												<tr>
													<th>学校名称</th>
													<td>
														<input type="text" class="form-control ">
													</td>
												</tr>
												<tr>
													<th>专业</th>
													<td>
														<input type="text" class="form-control ">
													</td>
												</tr>
												<tr>
													<th>入学时间</th>
													<td>
														<input type="date" class="form-control ">
													</td>
												</tr>
												<tr>
													<th>学历</th>
													<td>
														<select name="sel" id="" style="width: 100%;"
															class="form-control ">
															<option value="-1">请选择</option>
															<option value="1">小学</option>
															<option value="2">初中</option>
															<option value="3">中专</option>
															<option value="4">大专</option>
															<option value="5">本科</option>
															<option value="6">研究生</option>
															<option value="7">博士</option>
															<option value="8">博士后</option>

														</select>
													</td>
												</tr>
											</table>
										</div>
									</div>
									<div class="panel panel-default panel-info">
										<div class="panel-heading">
											<h3 class="panel-title"><b>工作信息</b></h3>
										</div>
										<div class="panel-body">
											<table class="table table-striped table-bordered table-hover">
												<tr>
													<th>公司名称</th>
													<td>
														<input type="text" class="form-control ">
													</td>
												</tr>
												<tr>
													<th>职位名称</th>
													<td>
														<input type="text" class="form-control ">
													</td>
												</tr>
												<tr>
													<th>所属行业</th>
													<td>
														<select name="sel" id="" style="width: 100%;"
															class="form-control ">
															<option value="-1">请选择</option>
															<option value="1">金融</option>
															<option value="2">教育</option>
															<option value="3">电商</option>
															<option value="4">传媒</option>
															<option value="5">健康医疗</option>
															<option value="6">游戏</option>
															<option value="7">娱乐</option>
															<option value="8">社交</option>
															<option value="9">电子</option>
															<option value="10">媒体</option>
															<option value="11">零售</option>
															<option value="12">交通物流</option>

														</select>
													</td>
												</tr>
											</table>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="Section2">
									<article class="htmleaf-container">
										<!-- 123 -->
										<div id="container" style="width:1000px;height:500px;margin:100px auto;"></div>
										<script>
											var categories = [
												"Java",
												"Javascript",
												"MySQL",
												"JavaWeb",
												"jQuery",
											],
												data = [
													{
														"y": 30,
														"drilldown": {
															"name": "Java",
															"categories": [
																"Thread",
																"io流",
																"Java基础"
															],
															"data": [
																20,
																30,
																50
															]
														}
													},
													{
														"y": 10,
														"drilldown": {
															"name": "Javascript",
															"categories": [
																"js的分类",
																"js的语法",
																"js的基本数据类型",
																"js的函数",
																"js的运算符",
																"js的循环结构",
																"js的用法",
																"js的事件",
																"js的字符串对象",
																"js的正则表达式",
																"js的表单验证",
																"js的数组对象",
																"js的日期对象",
																"js的数学对象",
																"js的BOM对象",
																"js的Dom对象",
															],
															"data": [
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																10,
																50
															]
														}
													},
													{
														"y": 30,
														"drilldown": {
															"name": "MySQL",
															"categories": [
																"数据查询语言",
																"数据操作语言",
																"事务处理语言"
															],
															"data": [
																70,
																20,
																10
															]
														}
													},
													{
														"y": 30,
														"drilldown": {
															"name": "javaWeb",
															"categories": [
																"JSP",
																"ASP",
																"PHP"
															],
															"data": [
																50,
																40,
																10
															]
														}
													},
													{
														"y": 20,
														"drilldown": {
															"name": "jQuery",
															"categories": [
																"jQuery 关联事件",
																"jQuery 操作节点",
																"jQuery 选择器"
															],
															"data": [
																40,
																40,
																10
															]
														}
													},
												];
											var totalData = [],
												partData = [],
												i,
												j,
												dataLen = data.length,
												randomNum,
												drillDataLen;
											for (i = 0; i < dataLen; i += 1) {
												totalData.push({
													name: categories[i],
													y: data[i].y
												});
												var cell = [];
												partData.push(cell);
												drillDataLen = data[i].drilldown.data.length;
												for (j = 0; j < drillDataLen; j += 1) {
													partData[i].push({
														name: data[i].drilldown.categories[j],
														y: data[i].drilldown.data[j],
													});
												}
											}
											Highcharts.setOptions({
												colors: ['#fd4f68', '#fb9447', '#fff14d', '#69df6d', '#31ffec', '#2dcbfb', '#8b3ffb', '#e63edc']
											});
											Highcharts.chart('container', {
												chart: {
													plotBackgroundColor: null,
													plotBorderWidth: null,
													plotShadow: false,
													type: 'pie',
													animation: false
												},
												title: {
													text: '技术占比'
												},
												subtitle: {
													text: '数据来源: 依据自我对技术的掌握情况'
												},
												tooltip: {
													pointFormat: '{series.name}: <b>{point.y}</b>'
												},
												plotOptions: {
													pie: {
														animation: false,
														allowPointSelect: true,
														cursor: 'pointer',
														dataLabels: {
															enabled: false
														},
														point: {
															events: {
																legendItemClick: function () {
																	return false;
																}
															}
														},
														events: {
															click: function (e) {
																this.chart.series[1].setData(partData[e.point.index], true, true, false);
																var parentSeries = this.chart.series[0],
																	points = parentSeries.points,
																	paretPoint = points[e.point.index],
																	targetSeries = this.chart.series[1],
																	renderer = this.chart.renderer,
																	shapeArgs = paretPoint.shapeArgs,
																	targetCenter = targetSeries.center;
																var poin1 = [shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r, shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r];
																var poin2 = [shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r, shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r];
																var radius = ((this.chart.plotTop + targetCenter[1] + targetCenter[2] / 2) - (this.chart.plotTop + targetCenter[1] - targetCenter[2] / 2)) / 2;
																var ceny = radius + (this.chart.plotTop + targetCenter[1] - targetCenter[2] / 2);
																var cen = [targetCenter[0] + this.chart.plotLeft, ceny];
																var pointObj = getCircleTangent(poin1, cen, radius);
																var pointObj2 = getCircleTangent(poin2, cen, radius);
																//start
																var x1 = pointObj.point1.x;
																var y1 = pointObj.point1.y;
																var x2 = pointObj.point2.x;
																var y2 = pointObj.point2.y;
																//end
																var xx1 = pointObj2.point1.x;
																var yy1 = pointObj2.point1.y;
																var xx2 = pointObj2.point2.x;
																var yy2 = pointObj2.point2.y;
																var starty = shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r;
																var endy = shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r;
																if (starty < endy) {
																	var yVal = (y1 < y2) ? y1 : y2;
																	var xVal = (yVal == y1) ? x1 : x2;
																	var yyVal = (yy1 < yy2) ? yy2 : yy1;
																	var xxVal = (yyVal == yy2) ? xx2 : xx1;
																	var paths = ['M',
																		shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r,
																		shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r,
																		'L',
																		xVal,
																		yVal,
																		'M',
																		xxVal,
																		yyVal,
																		'L',
																		shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r,
																		shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r
																	];
																	if (document.getElementsByClassName("pathline_" + e.point.index).length == 0) {
																		renderer.path(paths).attr({
																			stroke: '#000',
																			'zIndex': '88888',
																			'class': 'pathline pathline_' + e.point.index,
																			'stroke-width': 1
																		}).add();
																	}
																} else {
																	var yVal = (y1 < y2) ? y2 : y1;
																	var xVal = (yVal == y1) ? x1 : x2;
																	var yyVal = (yy1 < yy2) ? yy1 : yy2;
																	var xxVal = (yyVal == yy2) ? xx2 : xx1;
																	var paths2 = ['M',
																		shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r,
																		shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r,
																		'L',
																		xVal,
																		yVal,
																		'M',
																		xxVal,
																		yyVal,
																		'L',
																		shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r,
																		shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r,
																	];
																	if (document.getElementsByClassName("pathline_" + e.point.index).length == 0) {
																		renderer.path(paths2).attr({
																			stroke: '#000',
																			'zIndex': '88888',
																			'class': 'pathline pathline_' + e.point.index,
																			'stroke-width': 1
																		}).add();
																	}
																}
																var pathlines = document.getElementsByClassName("pathline");
																if (pathlines) {
																	for (var idx = 0; idx < pathlines.length; idx++) {
																		var cell = pathlines[idx];
																		cell.style.display = "none";
																	}
																}
																document.querySelector(".pathline_" + e.point.index).style.display = 'block';
															}
														},
													},
												},
												series: [{
													name: 'total',
													colorByPoint: true,
													center: ['25%', '50%'],
													endAngle: 102,
													startAngle: 102,
													allowPointSelect: false,
													dataLabels: {
														enabled: true,
														inside: true,
														distance: -30,
														format: '{point.percentage:.1f}%'
													},
													showInLegend: true,
													data: totalData,
												}, {
													name: 'part',
													colorByPoint: true,
													events: {
														click: function (event) {
															return false;
														}
													},
													center: ['75%', '50%'],
													size: '60%',
													dataLabels: {
														enabled: true,
														inside: true,
														distance: -30,
														format: '{point.percentage:.1f}%'
													},
													showInLegend: false,
													data: partData[partData.length - 1]
												}]
											}, function (chart) {
												var parentSeries = chart.series[0],
													points = parentSeries.points,
													paretPoint = points[points.length - 1],
													targetSeries = chart.series[1],
													renderer = chart.renderer,
													shapeArgs = paretPoint.shapeArgs,
													targetCenter = targetSeries.center;
												var poin1 = [shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r, shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r];
												var poin2 = [shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r, shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r];
												var radius = ((chart.plotTop + targetCenter[1] + targetCenter[2] / 2) - (chart.plotTop + targetCenter[1] - targetCenter[2] / 2)) / 2;
												var ceny = radius + (chart.plotTop + targetCenter[1] - targetCenter[2] / 2);
												var cen = [targetCenter[0] + chart.plotLeft, ceny];
												var pointObj = getCircleTangent(poin1, cen, radius);
												var pointObj2 = getCircleTangent(poin2, cen, radius);
												//start
												var x1 = pointObj.point1.x;
												var y1 = pointObj.point1.y;
												var x2 = pointObj.point2.x;
												var y2 = pointObj.point2.y;
												//end
												var xx1 = pointObj2.point1.x;
												var yy1 = pointObj2.point1.y;
												var xx2 = pointObj2.point2.x;
												var yy2 = pointObj2.point2.y;
												var starty = shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r;
												var endy = shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r;
												if (starty < endy) {
													var yVal = (y1 < y2) ? y1 : y2;
													var xVal = (yVal == y1) ? x1 : x2;
													var yyVal = (yy1 < yy2) ? yy2 : yy1;
													var xxVal = (yyVal == yy2) ? xx2 : xx1;
													var paths = ['M',
														shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r,
														shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r,
														'L',
														xVal,
														yVal,
														'M',
														xxVal,
														yyVal,
														'L',
														shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r,
														shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r
													];
													renderer.path(paths).attr({
														stroke: '#000',
														'zIndex': '88888',
														'class': 'pathline pathline_' + (points.length - 1),
														'stroke-width': 1
													}).add();
												} else {
													var yVal = (y1 < y2) ? y2 : y1;
													var xVal = (yVal == y1) ? x1 : x2;
													var yyVal = (yy1 < yy2) ? yy1 : yy2;
													var xxVal = (yyVal == yy2) ? xx2 : xx1;
													var paths2 = ['M',
														shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r,
														shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r,
														'L',
														xVal,
														yVal,
														'M',
														xxVal,
														yyVal,
														'L',
														shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r,
														shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r,
													];
													renderer.path(paths2).attr({
														stroke: '#000',
														'zIndex': '88888',
														'class': 'pathline pathline_' + (points.length - 1),
														'stroke-width': 1
													}).add();
												}
											});
											function getCircleTangent(point, dot, r) {
												var r_square = Math.pow(r, 2);
												var point_v = point[1] - dot[1];
												var point_h = point[0] - dot[0];
												var c_square = Math.pow(point_v, 2) + Math.pow(point_h, 2);
												var c = Math.sqrt(c_square);
												var sinA = Math.abs(point_v) / c;
												var cosA = Math.abs(point_h) / c;
												var b_square = c_square - r_square;
												var b = Math.sqrt(b_square);
												var sinB = b / c;
												var cosB = r / c;
												var quadrant = 1;
												var pm_h = point_h == 0 ? point_h : point_h / Math.abs(point_h);
												var pm_v = point_v == 0 ? point_v : point_v / Math.abs(point_v);
												var hv = pm_h * pm_v;
												switch (hv) {
													case 1:
														if ((pm_h + pm_v) == -2) {
															quadrant = 2;
														} else {
															quadrant = 4;
														}
														break;
													case -1:
														if ((pm_h - pm_v) == -2) {
															quadrant = 3;
														}
														break;
													case 0:
														if ((pm_h + pm_v) == -1) {
															quadrant = 2;
														}
														if ((pm_h + pm_v) == 1) {
															quadrant = 4;
														}
														break;
													default:
												}
												var sinC = 0;
												var conC = 0;
												var sinD = 0;
												var conD = 0;
												switch (quadrant) {
													case 1:
														sinC = cosB * cosA + sinB * sinA;
														conC = -(sinB * cosA - cosB * sinA);
														sinD = -(cosA * cosB - sinA * sinB);
														conD = -(sinA * cosB + cosA * sinB);
														break;
													case 2:
														sinC = -(cosB * cosA - sinB * sinA);
														conC = sinA * cosB + cosA * sinB;
														sinD = cosA * cosB + sinA * sinB;
														conD = -(sinA * cosB - cosA * sinB);
														break;
													case 3:
														sinC = -(cosA * cosB + sinA * sinB);
														conC = -(sinA * cosB - cosA * sinB);
														sinD = (cosA * cosB - sinA * sinB);
														conD = sinA * cosB + cosA * sinB;
														break;
													case 4:
														sinC = cosA * cosB - sinA * sinB;
														conC = -(sinA * cosB + cosA * sinB)
														sinD = -(cosA * cosB + sinA * sinB);
														conD = (sinA * cosB - cosA * sinB);
														break;
													default:
												}
												return {
													point1: { x: point[0] + b * conC, y: point[1] + b * sinC },
													point2: { x: point[0] + b * conD, y: point[1] + b * sinD }
												}; //两个切点位置
											}


										</script>
										<!--  -->
									</article>

								</div>

								<div role="tabpanel" class="tab-pane fade" id="Section3">
									<div class="panel panel-default panel-primary">
										<div class="panel-heading">
											<h1 style="text-align: center;color: red;">90</h1>
											<p style="text-align: center;">安全系数</p>
										</div>
										<div class="panel-body">
											<p style="text-align: left;"><b
													style="color: black;line-height: 80px;">账号设置</b></p>
											<table class="table table-striped  table-hover">
												<tr>
													<th>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</th>
													<td>存在风险，请设置密码<a href=""><span>设置密码</span></a></td>
												</tr>
												<tr>
													<th>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</th>
													<td>185****3265<a href=""><span>修改手机</span></a></td>
												</tr>
												<tr>
													<th>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</th>
													<td>存在风险，请绑定邮箱<a href=""><span>绑定邮箱</span></a></td>
												</tr>
												<tr>
													<th>三方账号</th>
													<td>微信<a href=""><span>绑定/解绑</span></a></td>
												</tr>
												<tr>
													<th>登录记录</th>
													<td><a href=""><span>查看记录</span></a></td>
												</tr>
											</table>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="Section4">
									<div class="panel panel-default panel-primary">
										<div class="panel-heading">
											<h4>隐私设置</h4>
										</div>
										<div class="panel-body">
											<table class="table table-striped  table-hover">
												<tr>
													<th>
														<h3>工作信息</h3><span>开启后在个人主页等模块展示工作信息</span>
													</th>
													<td><select name="" id="">														
														<option value="on">开启</option>
														<option value="off">关闭</option>
													</select></td>
												</tr>
												<tr>
													<th>
														<h3>教育信息</h3><span>开启后在个人主页等模块展示教育信息</span>
													</th>
													<td><select name="" id="">														
														<option value="on">开启</option>
														<option value="off">关闭</option>
													</select></td>
												</tr>
												<tr>
													<th>
														<h3>屏蔽设置</h3><span>屏蔽后，对方不可在您的内容下评论</span>
													</th>
													<td><a href="" style="color: rgb(0, 157, 255);">管理</a></td>
												</tr>
											</table>
										</div>
	
									</div>
								</div>
								<div role="tabpanel" class="tab-pane fade" id="Section5">

									<div class="panel panel-default panel-primary">
										<div class="panel-heading">
											<h4>管理认证</h4>
										</div>
										<div class="panel-body">
											<div class="list-group">
												<button type="button" class="list-group-item list-group-item-success">个人实名认证</button>
												<button type="button" class="list-group-item list-group-item-info">企业机构认证</button>
												<button type="button" class="list-group-item list-group-item-warning">工作认证</button>
												<button type="button" class="list-group-item list-group-item-danger">教育认证</button>
											</div>
										</div>
								</div>		
								</div>
								<div role="tabpanel" class="tab-pane fade" id="Section6">
									<div class="panel panel-default panel-primary">
										<div class="panel-heading">
											<h4>管理</h4>
										</div>
										<div class="panel-body">
											<div class="list-group">
												<button type="button" class="list-group-item list-group-item-success">内容管理</button>
												<button type="button" class="list-group-item list-group-item-info">评论管理</button>
												<button type="button" class="list-group-item list-group-item-warning">专栏管理</button>
												<button type="button" class="list-group-item list-group-item-danger">创作活动</button>
											</div>
										</div>
									</div>
								</div>
						</div>
					</div>
				</div>

			</div>
			<!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css"> -->
			<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
			<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
			<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
				crossorigin="anonymous"></script> -->
			<script src="../js/bootstrap.min.js"></script>


</body>

</html>